<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/view/src/view.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/view/src/view.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;!-- 视图组件 -->
  &lt;div :class="`xdh-go__view ${customClass}`" :style="customStyle">
    &lt;slot :menus="menuOption" :menuClick="menuClick">
      &lt;div class="xdh-go__menu">
        &lt;div
          v-for="(item, idx) in menuOption"
          :key="idx"
          :class="{'xdh-go__box': true, disabled: item.disabled || disabledAll}"
        >
          &lt;div v-if="!item.subMenu" @click="menuClick(item)">
            &lt;div class="icon-con">
              &lt;i :class="item.icon">&lt;/i>
            &lt;/div>
            &lt;div class="box">{{item.name}}&lt;/div>
          &lt;/div>
          &lt;div v-if="item.subMenu">
            &lt;div class="icon-con">
              &lt;i :class="item.icon">&lt;/i>
            &lt;/div>
            &lt;el-dropdown @command="(obj) => menuClick(obj)" trigger="click" class="submenu">
              &lt;span :class="{'el-dropdwon-link': true, 'disabled':item.disabled || disabledAll}">
                {{item.name}}
                &lt;i class="iconfont icon-bold-arrow-down" style="margin-left: 5px;">&lt;/i>
              &lt;/span>
              &lt;el-dropdown-menu slot="dropdown" class="xdh-go__dropdown">
                &lt;el-dropdown-item
                  :key="idx"
                  v-for="(item1, idx) in item.subMenu"
                  :command="item1"
                  :disabled="item1.disabled"
                >{{item1.name}}&lt;/el-dropdown-item>
              &lt;/el-dropdown-menu>
            &lt;/el-dropdown>
          &lt;/div>
        &lt;/div>
      &lt;/div>
    &lt;/slot>
  &lt;/div>
&lt;/template>
&lt;script>
/**
 * XdhGoView组件
 * @module xdh-go-view
 * @description 视图组件
 */
/**
 * 插槽
 * @member slots
 * @property {String} [default] 菜单按钮插槽,slot-scope =
 * @property {Array} [default.menuOption] 菜单选项
 * @property {Function} [default.menuClick] 菜单点击回调
 */
import go from 'gojs'
let viewMenus = [
  {
    name: '隐藏',
    icon: 'iconfont icon-magic',
    subMenu: [
      { name: '隐藏节点' },
      { name: '隐藏子节点' },
      { name: '隐藏关系label' },
      { name: '隐藏关系连线' }
    ]
  },
  {
    name: '显示',
    icon: 'iconfont icon-enlarge',
    subMenu: [
      { name: '显示子节点' },
      { name: '显示关系label' },
      { name: '显示关系连线' }
    ]
  },
  { name: '查看全部', icon: 'iconfont icon-bullseye' },
  {
    name: '缩小',
    icon: 'iconfont icon-zoomout'
  },
  {
    name: '放大',
    icon: 'iconfont icon-enlarge'
  }
]
export default {
  name: 'XdhGoView',
  components: {},
  /**
   * 参数属性
   * @property {Object} [diagarm] go.Diagram对象
   * @property {String} [customClass=''] 自定义容器类名
   * @property {Object} [customStyle={}] 自定义样式
   * @property {Array} [menus=[]] 自定义菜单
   * @property {Object} [handlers] 自定义菜单对应的处理方法
   
   */
  props: {
    diagram: {
      type: Object,
      default() {
        return null
      }
    },
    customClass: {
      type: String,
      default: ''
    },
    customStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    menus: {
      type: Array,
      default() {
        return []
      }
    },
    handlers: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      menuOption: (() => {
        if (this.menus.length !== 0) {
          return this.menus.filter(r => {
            return r.visible !== false
          })
        } else {
          return JSON.parse(JSON.stringify(viewMenus))
        }
      })(),
      disabledAll: false
    }
  },
  computed: {},
  methods: {
    toggleDisabledAll(disabled = true) {
      this.disabledAll = disabled
    },
    /**
     * @function menuClick
     * @name menuClick
     * @description 菜单点击
     * @param {Object} item 菜单项对象
     */
    menuClick(item) {
      let name = item.name
      /**
       * 菜单点击
       * @event item-click
       * @param {Object} item 菜单选项
       */
      this.$emit('item-click', item)
      if (this.handlers[name]) {
        this.handlers[name](this.diagram, go.GraphObject.make, go, item)
        return
      }
      let set = new go.Set()
      let diagram = this.diagram
      let model = diagram.model
      switch (name) {
        case '隐藏节点':
          diagram.selection.each(N => {
            if (N instanceof go.Node) {
              set.add(N)
            }
          })
          set.each(N => {
            N.visible = false
          })
          break
        case '隐藏关系label':
          model.setDataProperty(
            this.diagram.model.modelData,
            'showLinkLabels',
            false
          )
          break
        case '隐藏关系连线':
          model.setDataProperty(
            this.diagram.model.modelData,
            'showLinks',
            false
          )
          break
        case '隐藏子节点':
          diagram.selection.each(N => {
            if (N instanceof go.Node) {
              set.add(N)
            }
          })
          set.each(N => {
            N.collapseTree(1)
          })
          break
        case '显示子节点':
          diagram.selection.each(N => {
            if (N instanceof go.Node) {
              set.add(N)
            }
          })
          set.each(N => {
            N.expandTree(1)
            N.findTreeChildrenNodes().each(N2 => {
              N2.visible = true
            })
          })
          break
        case '显示关系label':
          model.setDataProperty(model.modelData, 'showLinkLabels', true)
          break
        case '显示关系连线':
          model.setDataProperty(model.modelData, 'showLinks', true)
          break
        case '查看全部':
          diagram.zoomToFit()
          break
        case '缩小':
          diagram.scale = diagram.scale - 0.2
          break
        case '放大':
          diagram.scale = diagram.scale + 0.2
          break
      }
    }
  },
  created() {}
}
&lt;/script>
&lt;style type="text/scss" lang="scss" scoped>
.tab-menu {
  background: #3d4c63;
  color: #fff;
  position: fixed;
  z-index: 999;
  left: 250px;
  top: 50px;
  border-radius: 5px;
}
.box-wrapper {
  cursor: pointer;
  background-color: #1c2237;
  padding: 0;
  margin: 10px;
  min-width: 65px;
  border-radius: 5px;
  border: 1px solid #151929;
  font-size: 14px;
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  .icon-con {
    height: 40px;
    line-height: 40px;
  }
  &amp;.disabled {
    cursor: not-allowed;
    color: #888;
  }
  .submenu {
    color: #fff;
    display: block;
    margin-top: -8px;
    .disabled {
      cursor: not-allowed;
      color: #888;
      pointer-events: none;
    }
  }
}
.box {
  margin-top: -8px;
}
.el-dropdown-menu {
  padding: 5px 0;
  border: 1px solid #3d4c63;
  background-color: #1c2237;
  .el-dropdown-menu__item {
    line-height: 25px;
    color: #fff;
    &amp;.is-disabled {
      color: #666;
    }
    &amp;:not(.is-disabled):hover {
      background-color: #2d69f7;
      color: #fff;
    }
  }
  &amp; /deep/ .popper__arrow {
    border-bottom-color: #3d4c63;
    &amp;:after {
      border-bottom-color: #1c2237;
    }
  }
}
&lt;/style></code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-utils_directives_draggable.html">utils/directives/draggable</a></li><li><a href="module-utils_directives_resizable.html">utils/directives/resizable</a></li><li><a href="module-utils_events.html">utils/events</a></li><li><a href="module-utils_storage.html">utils/storage</a></li><li><a href="module-xdh-go.html">xdh-go</a></li><li><a href="module-xdh-go-circle-menu.html">xdh-go-circle-menu</a></li><li><a href="module-xdh-go-draft.html">xdh-go-draft</a></li><li><a href="module-xdh-go-html.html">xdh-go-html</a></li><li><a href="module-xdh-go-layout.html">xdh-go-layout</a></li><li><a href="module-xdh-go-overview.html">xdh-go-overview</a></li><li><a href="module-xdh-go-search.html">xdh-go-search</a></li><li><a href="module-xdh-go-select.html">xdh-go-select</a></li><li><a href="module-xdh-go-snapshot.html">xdh-go-snapshot</a></li><li><a href="module-xdh-go-tool.html">xdh-go-tool</a></li><li><a href="module-xdh-go-tooltiip.html">xdh-go-tooltiip</a></li><li><a href="module-xdh-go-view.html">xdh-go-view</a></li><li><a href="module-xdh-go-viewer.html">xdh-go-viewer</a></li></ul><h3>Classes</h3><ul><li><a href="module-utils_directives_draggable-Draggable.html">Draggable</a></li><li><a href="module-utils_directives_resizable-Resizable.html">Resizable</a></li><li><a href="module-utils_events-Events.html">Events</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-go-view.html#~event:item-click">item-click</a></li><li><a href="module-xdh-go-select.html#~event:on-change">on-change</a></li><li><a href="module-xdh-go-search.html#~event:on-error">on-error</a></li><li><a href="module-xdh-go-circle-menu.html#~event:on-item-click">on-item-click</a></li><li><a href="module-xdh-go.html#~event:on-load-data">on-load-data</a></li><li><a href="module-xdh-go.html#~event:on-ready">on-ready</a></li><li><a href="module-xdh-go-search.html#~event:on-search">on-search</a></li><li><a href="module-xdh-go-snapshot.html#~event:on-snap">on-snap</a></li></ul><h3>Global</h3><ul><li><a href="global.html#animationPool">animationPool</a></li><li><a href="global.html#bindToState">bindToState</a></li><li><a href="global.html#ease">ease</a></li><li><a href="global.html#easeInBack">easeInBack</a></li><li><a href="global.html#easeInBounce">easeInBounce</a></li><li><a href="global.html#easeInCirc">easeInCirc</a></li><li><a href="global.html#easeInCubic">easeInCubic</a></li><li><a href="global.html#easeInElastic">easeInElastic</a></li><li><a href="global.html#easeInExpo">easeInExpo</a></li><li><a href="global.html#easeInOutBack">easeInOutBack</a></li><li><a href="global.html#easeInOutBounce">easeInOutBounce</a></li><li><a href="global.html#easeInOutCubic">easeInOutCubic</a></li><li><a href="global.html#easeInOutQuad">easeInOutQuad</a></li><li><a href="global.html#easeInOutQuart">easeInOutQuart</a></li><li><a href="global.html#easeInOutQuint">easeInOutQuint</a></li><li><a href="global.html#easeInOutSine">easeInOutSine</a></li><li><a href="global.html#easeInQuad">easeInQuad</a></li><li><a href="global.html#easeInQuart">easeInQuart</a></li><li><a href="global.html#easeInQuint">easeInQuint</a></li><li><a href="global.html#easeInSine">easeInSine</a></li><li><a href="global.html#easeOutBack">easeOutBack</a></li><li><a href="global.html#easeOutBounce">easeOutBounce</a></li><li><a href="global.html#easeOutCirc">easeOutCirc</a></li><li><a href="global.html#easeOutCubic">easeOutCubic</a></li><li><a href="global.html#easeOutElastic">easeOutElastic</a></li><li><a href="global.html#easeOutExpo">easeOutExpo</a></li><li><a href="global.html#easeOutQuad">easeOutQuad</a></li><li><a href="global.html#easeOutQuart">easeOutQuart</a></li><li><a href="global.html#easeOutQuint">easeOutQuint</a></li><li><a href="global.html#easeOutSine">easeOutSine</a></li><li><a href="global.html#extendOption">extendOption</a></li><li><a href="global.html#genOption">genOption</a></li><li><a href="global.html#getHandler">getHandler</a></li><li><a href="global.html#handleEvents">handleEvents</a></li><li><a href="global.html#handleParts">handleParts</a></li><li><a href="global.html#horPanel%25E6%25B0%25B4%25E5%25B9%25B3%25E5%25B8%2583%25E5%25B1%2580">horPanel 水平布局</a></li><li><a href="global.html#makePort">makePort</a></li><li><a href="global.html#node%25E8%258A%2582%25E7%2582%25B9%25E5%25AE%259A%25E4%25B9%2589">node 节点定义</a></li><li><a href="global.html#removeGray">removeGray</a></li><li><a href="global.html#setGray">setGray</a></li><li><a href="global.html#shapeParamsBinding">shapeParamsBinding</a></li><li><a href="global.html#spotPanelspot%25E5%25B8%2583%25E5%25B1%2580">spotPanel spot布局</a></li><li><a href="global.html#verPanel%25E5%259E%2582%25E7%259B%25B4%25E5%25B8%2583%25E5%25B1%2580">verPanel 垂直布局</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Nov 05 2019 16:15:35 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
